Skip to main content

Extension Template Catalog

Overview​

The extension template catalog is a remote, versioned list of Candescent-maintained starters for mobile widgets and features. Use these vetted project layouts when you want a faster path than a blank offline scaffold. The generator downloads the latest catalog, allows users to pick a template, and produces a runnable Nx project wired for @cdx-extensions/di-sdk (PlatformSDK) and the mobile sandbox.

note

Run all commands below from your FI repository root.

Browse the Catalog​

Templates are added to the catalog on an ongoing basis. See the full, up-to-date set at generation time (interactive prompts) or with the list commands below.

Setup​

Install the generator package:

Bash
npm install @cdx-extensions/extension-generator-mobile

Use the same @cdx-extensions registry configuration as the rest of your FI repo (see Getting Started).

See what's available​

Bash
nx run list-mobile-templates
nx run list-mobile-widget-templates
nx run list-mobile-feature-templates

These commands fetch the same remote catalog the generators use and print entries grouped by type and category.

Example: Investment Portfolio (Data Chart)​

Browse — category and template picker:

$ nx run generate-mobile-widget

? Choose a template category: › Data-chart
? Choose a template: › Investment Portfolio — Financial widget with donut chart, portfolio legend, and SDK branding hooks.
? Enter your FI Id (digits only, e.g. 0123): › 0123
? Choose a name for your widget (kebab-case, e.g. acme-portfolio): › acme-portfolio
Interactive CLI prompts for choosing a mobile widget category and template

Outcome — generated widget in the mobile sandbox:

Investment Portfolio widget with donut chart and legend in the mobile sandbox

Example: Agent Chat (Interactive)​

Browse — category and template picker:

$ nx run generate-mobile-feature

? Choose a template category: › Interactive
? Choose a template: › Agent Chat — Bring-your-own-agent full-screen chat feature.
? Enter your FI Id (digits only, e.g. 0123): › 0123
? Choose a name for your feature (kebab-case, e.g. agent-chat): › acme-chat
Interactive CLI prompts for choosing a mobile feature category and template

Outcome — generated feature in the mobile sandbox:

Agent Chat feature with chat UI in the mobile sandbox
note

Template ids, categories, and counts change as Candescent publishes new starters. Use nx run list-mobile-templates or the interactive generator for the current catalog.

Generate Your Extension​

Interactive (full flow)​

Bash
nx run generate-mobile-extensions

Equivalent:

Bash
nx g @cdx-extensions/extension-generator-mobile:generate

Flow:

  1. Fetches the latest catalog from the remote URL (with cache and local fallbacks).
  2. Prompts you to pick an extension type (widget or feature).
  3. Lists templates grouped by category.
  4. Prompts you to pick a category, then a template.
  5. Prompts for your FI Id and extension name.
  6. Optionally prompts for mock API baseUrl and apiPath when the template supports it.
  7. Downloads the selected npm template package and scaffolds the project.

Widget or feature only​

This step can be skipped if you've chosen between feature and widget.

Bash
nx run generate-mobile-widget    # widgets only
nx run generate-mobile-feature   # features only
Workspace commandUnderlying generator
nx run generate-mobile-extensions@cdx-extensions/extension-generator-mobile:generate
nx run generate-mobile-widget@cdx-extensions/extension-generator-mobile:widget
nx run generate-mobile-feature@cdx-extensions/extension-generator-mobile:feature

Non-Interactive / CI Usage​

Pass generator options after --:

Bash
nx run generate-mobile-widget -- --template=investment-portfolio --fiId=0123 --name=acme-portfolio
nx run generate-mobile-feature -- --template=agent-chat --fiId=0123 --name=acme-chat
OptionRequiredDescription
fiIdYesNumeric FI id — digits only (0-9); accepts 4 or 5 digits (e.g. 0123, 03100). Values shorter than 4 digits are zero-padded (123 → 0123).
nameYesExtension slug in kebab-case
templateYesCatalog template id (discover ids with nx run list-mobile-templates) or full npm package name
noCacheNoRe-download catalog and template overlays (skip ~/.cdx/cache)
catalogUrlNoOverride remote catalog URL
directoryNoOutput parent (widgets/mobile or features/mobile)
sandboxPathNoSandbox auto-wiring (default playground/mobile-sandbox)
baseUrlNoMock API origin (widgets with config.ts.tmpl only)
apiPathNoMock API path (widgets with config.ts.tmpl only)
skipApiValidationNoSkip live HTTP validation during generation

What You Get​

In addition to extension source from the selected template package, the generator writes CDX project scaffold files:

  • package.json, project.json, tsconfig.json
  • src/index.ts, component entry file, and branding types

Output paths:

  • Widgets → widgets/mobile/<name>/
  • Features → features/mobile/<name>/

The generator also auto-wires the new project into playground/mobile-sandbox so you can preview immediately.

Only modify files inside src/ for your extension logic and UI. See Getting Started for the full editability guide.

Advanced​

Optional reference for troubleshooting and CI. Most users can skip this section.

Catalog source and cache​

On each run the generator syncs catalog/extension-templates.json in this order: remote URL → ~/.cdx/cache/catalog/ → local workspace catalog/extension-templates.json.

Use --noCache after a platform publish if you need a fresh catalog or template overlay. Override the catalog URL with CDX_EXTENSION_CATALOG_URL or --catalogUrl when directed by support.

Template packages are cached under ~/.cdx/cache/<package>@<version>/dist/.

Mock API URL (config.ts templates)​

Templates that ship config.ts.tmpl with baseUrl and apiPath trigger a mock API flow during generation. The generator reads defaults from that file, optionally validates the response when mockApiContract is set, and patches the generated widget's src/config.ts.

Features without config.ts.tmpl skip URL prompts entirely.

Supported mockApiContract values: portfolio-allocation, credit-score.

Bash
nx run generate-mobile-widget -- \
  --template=investment-portfolio --fiId=0123 --name=acme-portfolio \
  --baseUrl=https://candescent.wiremockapi.cloud \
  --apiPath=/investment-portfolio

nx run generate-mobile-widget -- \
  --template=investment-portfolio --fiId=0123 --name=acme-portfolio \
  --skipApiValidation

Next Steps​